<template>
	<view class="page-body">
		<el-row :gutter="15">
			<el-form ref="form1" :model="form1" :rules="rules" size="medium" label-width="100px">
				<el-col :span="24">
					<el-form-item label="文章标题" prop="title">
						<el-input v-model="form1.title" placeholder="请输入文章标题" clearable :style="{width: '100%'}">
						</el-input>
					</el-form-item>
				</el-col>
				<!-- <el-col :span="8">
					<el-form-item label="文章分类" prop="category_id">
						<vk-data-input-remote-select v-model="form1.category_id" placeholder="请选择文章分类"
							action="admin/articles/category/sys/categories"
							:props="{ list: 'rows', value: '_id', label: 'name' }" width="100%" show-all>
						</vk-data-input-remote-select>
					</el-form-item>
				</el-col> -->
				<el-col :span="8">
					<el-form-item label="是否推荐" prop="is_essence">
						<el-select v-model="form1.is_essence" placeholder="请选择是否推荐" clearable :style="{width: '100%'}">
							<el-option v-for="(item, index) in isEssenceOptions" :key="index" :label="item.label"
								:value="item.value" :disabled="item.disabled"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="是否置顶" prop="is_sticky">
						<el-select v-model="form1.is_sticky" placeholder="请选择是否置顶" clearable :style="{width: '100%'}">
							<el-option v-for="(item, index) in isStickyOptions" :key="index" :label="item.label"
								:value="item.value" :disabled="item.disabled"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="发布时间" prop="publish_date">
						<el-date-picker type="datetime" v-model="form1.publish_date" format="yyyy-MM-dd HH:mm:ss"
							value-format="yyyy-MM-dd HH:mm:ss" :style="{width: '100%'}" placeholder="请选择发布时间" clearable>
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="文章封面" prop="avatar" required>
						<vk-data-input-file-select v-model="form1.avatar" placeholder="请选择图片" file-type="image">
						</vk-data-input-file-select>
						<!-- <vk-data-upload v-model="form1.thumb" :limit="1"></vk-data-upload> -->
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="文章摘要" prop="excerpt">
						<el-input v-model="form1.excerpt" type="textarea" placeholder="请输入文章摘要"
							:autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="文章内容" prop="content">
						<view style="height: 45vh;border: 1px solid #dcdfe6; border-radius: 4px;">
							<sp-editor :toolbar-config="{
								excludeKeys: ['video'],
								iconSize: '12rpx',
								iconColumns: 20
								}" v-model="form1.content" @init="initEditor" placeholder="请输入文章内容" width="100%" @upinImage="upinImage">
							</sp-editor>
						</view>
					</el-form-item>
				</el-col>

				<!-- 
				<el-col :span="8">
					<el-form-item label="评论开关" prop="comment_status">
						<el-select v-model="form1.comment_status" placeholder="请选择评论开关" clearable
							:style="{width: '100%'}">
							<el-option v-for="(item, index) in comment_statusOptions" :key="index" :label="item.label"
								:value="item.value" :disabled="item.disabled"></el-option>
						</el-select>
					</el-form-item>
				</el-col> -->


				<el-col :span="24">
					<el-form-item size="large">
						<el-button type="primary" @click="submitForm">提交</el-button>
						<el-button @click="resetForm">重置</el-button>
					</el-form-item>
				</el-col>
			</el-form>
		</el-row>
	</view>
</template>
<script>
	var that; // 当前页面对象
	var vk = uni.vk; // vk实例
	export default {
		props: ['action', 'form-type', 'item'],
		components: {},
		data() {
			return {
				editorIns: null,
				form1: {
					title: undefined,
					category_id: undefined,
					avatar: null,
					excerpt: null,
					content: null,
					publish_date: null,
					is_sticky: 0,
					is_essence: 0,
				},
				rules: {
					title: [{
						required: true,
						message: '请输入课程标题',
						trigger: 'blur'
					}],
					excerpt: [{
						required: true,
						message: '请输入文章摘要',
						trigger: 'blur'
					}],
					publish_date: [{
						required: true,
						message: '请选择发布时间',
						trigger: 'change'
					}],
					// category_id: [{
					// 	required: true,
					// 	message: '请选择文章分类',
					// 	trigger: 'change'
					// }]
				},
				isStickyOptions: [{
					"label": "是",
					"value": 1
				}, {
					"label": "否",
					"value": 0
				}],
				isEssenceOptions: [{
					"label": "是",
					"value": 1
				}, {
					"label": "否",
					"value": 0
				}],
				comment_statusOptions: [{
					"label": "关闭评论",
					"value": 0
				}, {
					"label": "所有人",
					"value": 1
				}, {
					"label": "仅购买",
					"value": 2
				}],
			}
		},
		//监听-页面每次【加载时】执行(如:前进)
		onLoad(options = {}) {},
		created() {
			that = this;
			vk = that.vk;

		},
		mounted() {},
		methods: {
			//页面数据初始化函数
			init(options) {

			},
			initEditor(editor) {
				this.editorIns = editor // 保存编辑器实例
				// 保存编辑器实例后，可以在此处获取后端数据，并赋值给编辑器初始化内容
				if (this.formType == "update") {
					this.form1 = this.item
					// this.form1.content = {}
					// this.form1.content.html = this.item.content
					// console.log(this.item.content)
				}
				this.editorIns.setContents({
					html: this.item.content
				})
			},
			submitForm() {
				this.$refs['form1'].validate(valid => {
					if (!valid) return
					this.form1.content = this.form1.content.html
					vk.callFunction({
						url: this.action,
						title: '提交中...',
						data: this.form1,
						success(data) {
							that.$emit("success")
						}
					});
				})
			},
			resetForm() {
				this.$refs['form1'].resetFields()
			},
			/**
			 * 直接运行示例工程插入图片无法正常显示的看这里
			 * 因为插件默认采用云端存储图片的方式
			 * 以$emit('upinImage', tempFiles, this.editorCtx)的方式回调
			 * @param {Object} tempFiles
			 * @param {Object} editorCtx
			 */
			upinImage(tempFiles, editorCtx) {
				/**
				 * 本地临时插入图片预览
				 * 注意：这里仅是示例本地图片预览，因为需要将图片先上传到云端，再将图片插入到编辑器中
				 * 正式开发时，还请将此处注释，并解开下面 使用 uniCloud.uploadFile 上传图片的示例方法 的注释
				 * @tutorial https://uniapp.dcloud.net.cn/api/media/editor-context.html#editorcontext-insertimage
				 */
				//       // #ifdef MP-WEIXIN
				//       // 注意微信小程序的图片路径是在tempFilePath字段中
				//       editorCtx.insertImage({
				//         src: tempFiles[0].tempFilePath,
				//         width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
				//         success: function () {}
				//       })
				//       // #endif

				//       // #ifndef MP-WEIXIN
				//       editorCtx.insertImage({
				//         src: tempFiles[0].path,
				//         width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
				//         success: function () {}
				//       })
				//       // #endif

				/**
				 * 使用 uniCloud.uploadFile 上传图片的示例方法（可适用多选上传）
				 * 正式开发环境中，请将上面 本地临时插入图片预览 注释后，模仿以下写法
				 */
				let imageUrl
				tempFiles.forEach(async (item) => {
					vk.callFunctionUtil.uploadFile({
						title: "上传中...",
						filePath: item.path,
						fileType: "image",
						success(res) {
							// 执行绑定头像
							imageUrl = res.fileID;
							editorCtx.insertImage({
								src: imageUrl,
								width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
							})
						}
					});

				})
			},
		},
		// 监听器
		watch: {},
		// 过滤器
		filters: {},
		// 计算属性
		computed: {},
	}
</script>
<style lang="scss" scoped>
	.el-upload__tip {
		line-height: 1.2;
	}

	.page-body {
		max-width: 1200px !important;
		margin: 0 auto;
	}
</style>